<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:p="http://primefaces.org/ui">
    <ui:composition template="/template.xhtml">
        <ui:define name ="title">
            <h:outputText value="Welcome to BrainStretch"/>
        </ui:define>
        <ui:define name ="body">
            <div class ="centered">
                <h:form id ="loginForm" class="login">
                    <h:outputText value="Username" styleClass="inputLabel"/>
                    <p:inputText value="#{userController.username}" styleClass="input text"/>
                    <h:outputText value ="Password" styleClass="inputLabel"/>
                    <p:inputText type="password"  value="#{userController.password}" styleClass="input text"/>
                    <h:commandButton value="Log in" action="#{userController.login()}"/>
                </h:form>     
            </div>
        </ui:define>
    </ui:composition>
</html>

